<template>
	<div class="shopping">
		<div class="shopping-title layout">
			<span class="fs30rem c333 w50 align-center" :class="{ select: type == '2'}" @click="loadInitData('2')">预售商品</span>
			<span class="fs30rem c333 w50 align-center" :class="{ select: type == '1'}" @click="loadInitData('1')">在售商品</span>
		</div>
		<div class="shopping-content" v-if="flag">
			<div class="border-t20 content-top" v-for="(item,index) in data">
				<div class="top-title layout border-b pl30rem pr30rem">
					<div class="flex_1">
						<div class="pretty p-icon p-round p-jelly mt10rem mr20rem fs18">
	                        <input type="checkbox" v-model="item.checked" @change="clickAll(item, index, $event)">
	                        <div class="state p-primary">
	                            <i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
	                            <label></label>
	                        </div>
	                    </div>
	                    <span class="fs34rem">{{ item.sname }}</span>
					</div>
					<button class="fs28rem c333" @click="actionSheet(item.shop_id)">领券</button>
				</div>
				<ul class="pl30rem pr30rem">
					<!-- state  下架 0  过期 -1   正常 1  售罄 2 -->
					<li class="border-b layout pt30rem pb30rem" v-for="(items,index) in item.content" :class="[{ sold: items.state == 0, sell: items.state == 2, past:items.state == -1 }]">
						<span class='circle block border mr20rem' style="width:20px;height:20px;border-color:#bec3c7" v-if="items.state == 0 || items.state == 2 || items.state == -1"></span>
						<div class="pretty p-icon p-round p-jelly mr20rem fs18" v-else>
	                        <input type="checkbox" v-model="items.checked" @change="clickOn(item, items, index, $event)">
	                        <div class="state p-primary">
	                            <i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
	                            <label></label>
	                        </div>
	                    </div>

	                    <div class="img-father mr35rem ">
		                    <img class="responsive-img" :src="img_url + items.goods_picture" alt="">
	                    </div>
						<div class="img-right flex_1">
							<div class="layout"><p class="fs30rem c333 bold ellipsis">{{ items.goods_name }}</p><i class="iconfont icon-shanchu fs24 c666" @click="remove(items.sku_id)"></i></div>
							<span class="fs26rem c999 mt25rem">{{ items.sku_name }}</span>
							<div class="layout mt25rem">
								<div style="width:8rem;">
									<strong class="fs34rem red mr30rem">￥{{ items.price }}</strong>
									<p><del class="fs24rem c999">原价：￥{{ items.promotion_price }}</del></p>
								</div>
								<div class="layout quantity">
									<i class="iconfont icon-jian1" @click="minus(items)"></i>
									<input type="text" v-model="items.num" readonly="readonly">
									<i class="iconfont icon-jia1" @click="plus(items)"></i>
								</div>
							</div>
						</div>
					</li>
				</ul>
				<div class="shopping-close border-t layout bg-white" :class="{ shopping_bottom : showApp=='1' }">
					<div class="flex_1 layout pl30rem">
						<div class="layout">
							<div class="pretty p-icon p-round p-jelly mt10rem mr20rem fs18">
		                        <input type="checkbox" v-model="checked_all" @change="selectAll($event)">
		                        <div class="state p-primary">
		                            <i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
		                            <label></label>
		                        </div>
		                    </div>
		                    <span class="fs30rem c333">全选</span>
						</div>
						<span class="fs30rem c666 mr40rem">合计:￥{{ total }}</span>
					</div>
					<button class="close-btn bg-red fs30rem white bold" @click="pay">结算({{sum}})</button>
				</div>
			</div>
		</div>
		<template v-else>
			<default :imgUrl="img" explain='购物车暂无商品'></default>
		</template>
		
		<popup v-model="popupVisible" position="bottom" class="full-width">
			<h1 class="align-center fs34rem c333 bold pt35rem pb35rem">领取优惠券</h1>
			<!--  <ul v-infinite-scroll="loadData" infinite-scroll-disabled="loading" infinite-scroll-distance="3"> -->
			<ul style="max-height:22rem;overflow-y: scroll;">
			 	<li class="border-t pl30rem pr30rem layout-juscon pt40rem pb40rem" v-for="item in coupon_list">
			 		<div class="left-text">
			 			<strong class="fs34rem red bold mb20rem">{{ item.money }}元</strong>
						<p class="fs26rem c666 mb15rem">{{ item.tips }}</p>
						<p class="fs24rem c999">使用期限:{{ item.start_time * 1000,'yyyy.MM.dd' | formatDate }}-{{item.end_time * 1000,'yyyy.MM.dd' | formatDate }}</p>
			 		</div>
			 		<button class="get-btn bg-red white align-center fs30rem" @click="getCoupon(item.shop_id,item.coupon_type_id)">领取</button>
			 	</li>
			 </ul>
		</popup>
	</div>
</template>

<script>
	import { getCartList, getCouponList, removeCart, receiveCoupon, changeNum } from '@/api/shopping-cart';
	import { Popup,InfiniteScroll } from 'mint-ui';
	import Default from "@/components/Default";
	import $modal from '@/utils/modal';
	import { formatDate } from "@/utils";
	import $toast from '@/utils/toast';
	import { iosapp } from "@/utils";
	export default{
		components:
        {
            Popup,
            Default
        },
        directives: {
            InfiniteScroll
        },
        filters:
		{
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}  
		},
		data()
		{
			return{
				popupVisible : false,
				loading      : false,
				checked_all  : false,
				flag         : false,
				shop_checked : false,
				data         : null,
				type         : '2',
				del_type     : '2',
				exchange     : '',
				coupon_list  : [],
				uid          : window.localStorage.getItem('uid'),
				showApp      : window.sessionStorage.getItem('isapp'),
				img_url      : process.env.IMG_URL,
				img          : require('../../assets/icon-shopping.png')
			}
		},
        computed: {
            total()
            {
                var total = 0;
                this.exchange = '';
                for (var i in this.data)
                {
                	for(var j in this.data[i].content)
                	{
	                    if (this.data[i].content[j].checked)
	                    {
	                        total += this.data[i].content[j].price * this.data[i].content[j].num;

	                        this.exchange += this.data[i].content[j].sku_id + ':' +this.data[i].content[j].num;
	                        this.exchange += ',';
	                    }
                	}
                }
                return total;
            },
            sum()
            {
            	var sum = 0;
                for (var i in this.data)
                {
                	for(var j in this.data[i].content)
                	{
	                    if (this.data[i].content[j].checked)
	                    {
	                      ++sum;
	                    }
                	}
                }
                return sum;
            },
        },
		created()
		{
			this.loadData();
			if(this.showApp == '1')
				iosapp('backAction');
		},
		methods:
		{
			loadData()
			{
				getCartList(this.uid, this.type).then( res=> {
					this.data = res.data;
					if(this.data.length > 0)
						this.flag = true;
					else
						this.flag = false;
				})
			},
			loadInitData(type)
			{
				this.type = type;
				this.del_type = type;
				this.loadData();
			},
			loadCounter(item,num)
			{
				var params = {
					uid        : this.uid,
					sku_id     : item.sku_id,
					goods_type : this.type,
					quantity   : num,
				}
				changeNum(params).then(res => {
					
				})
			},
			minus(items)
            {
            	if( items.state == 0 || items.state == -1 || items.state == 2 ){
            		return;
            	}

                if(items.num <= 1)
                    return;

                --items.num;

                this.loadCounter(items,'-1');
            },
            plus(items)
            {
            	if( items.state == 0 || items.state == -1 || items.state == 2 ){
            		return;
            	}

            	++items.num;

            	this.loadCounter(items,'1');
            },
            remove(id)
            {
            	$modal.confirm('确定删除？').then(res=>{
            		var params = {
						uid        : this.uid,
						sku_id     : id,
						goods_type : this.del_type
            		}
            		removeCart(params).then(res=>{
            			this.loadData();
            		})
            	})
            },
            getCoupon(shop_id,coupon_type_id)
            {
            	var params = {
					uid            : this.uid,
					shop_id        : shop_id,
					coupon_type_id : coupon_type_id
            	}
            	receiveCoupon(params).then(res => {
            		 $toast('领取成功')
            	})
            },
			actionSheet(id)
			{
				this.coupon_list = [];
				getCouponList(this.uid,id).then( res => {
					if(res.data.length > 0){
						this.coupon_list = res.data;
						this.popupVisible = true;
					}
					else
						$toast('暂无可领券')
				})
            },
            pay()
            {	
            	var exchange = this.exchange;
            	var a = exchange.length;
        	    var b = exchange.substring(0,a - 1)

            	this.$store.dispatch("skuidList", b);
				this.$router.push('/shopping/pay?type=0')
            },
            // 商品
            clickOn(item, items, index, e)
            {
                if(e.target.checked)
                    items.checked = true;
                else
                    items.checked = false;
                

                for(let i in item.content){
            		if(!item.content[i].checked){
                		item.checked = false;
                		this.$set(item.content, index, items);
                		break;
                	}
                	else
                	{
                		item.checked = true;
                		this.$set(item.content, index, items);
                	}
                }
                this.isSelectALL();    
            },
            // 店铺
            clickAll(item, index, e)
            {
				if(e.target.checked)
                    item.checked = true;
                else
                    item.checked = false;
                
                for(let i in item.content)
                {
                	if(item.checked){
                		if( item.content[i].state == 0 || item.content[i].state == -1 || item.content[i].state == 2 ){
			            		item.content[i].checked = false;

			            }else{
                			item.content[i].checked = true;
			            }
                		this.$set(item, index, item.content);
               		}
               		else
               		{
                		item.content[i].checked = false;
                		this.$set(item, index, item.content);
               		}
                }
                this.$set(this.data, index, item);
 				this.isSelectALL();    
            },
           	// 全选
            selectAll(e)
            {
            	if(e.target.checked)
            	{
            		for(let i in this.data) {
	            		this.data[i].checked = true;
	            		for(let j in this.data[i].content)
	            		{
	            			//state  下架 0  过期 -1   正常 1  售罄 2
			            	if( this.data[i].content[j].state == 0 || this.data[i].content[j].state == -1 || this.data[i].content[j].state == 2 ){
			            		this.data[i].content[j].checked = false;
			            		this.data[i].checked = false;
			            	}
			            	else
			            	{
	            				this.data[i].content[j].checked = true;
			            	}
            				this.$set(this.data[i].content, j, this.data[i].content[j])
	            		}
	            	}
            	}
            	else
            	{
					for(let i in this.data) {
	            		this.data[i].checked = false;
	            		for(let j in this.data[i].content)
	            		{
	            			this.data[i].content[j].checked = false;
	            			this.$set(this.data[i].content, j, this.data[i].content[j]);
	            		}
	            	}
	            }
	            this.isSelectALL();

	        },
	        //判断是否全选
           	isSelectALL()
           	{
 				for(let i in this.data){
                	for(let j in this.data[i].content)
                	{
                		if( this.data[i].content[j].state == 0 || this.data[i].content[j].state == -1 || this.data[i].content[j].state == 2 ){
		            		return;
		            	}
		            	else{
							if(!this.data[i].content[j].checked){
		                		this.checked_all = false;
		                		return; 
		                	}
		                	else
		                	{
		                		this.checked_all = true;
		                	}
		            	}
                	}
                }
           	},
		}
	}
</script>

<style lang="less">
	.shopping{
		.shopping-title{
			height: 100/28rem;
			line-height: 100/28rem;
			.select{
				position: relative;
				color: #ff0000;
				font-weight: 600;
			}
			.select:after{
				content: "";
				display: block;
				width: 80/28rem;
				height: 4/28rem;
				background-color: #ff0000;
				position: absolute;
				bottom: 10/28rem;
				left: 50%;
				transform: translate(-50%,0);
			}
		}
		.shopping-content{
			padding-bottom: 220/28rem;
			.top-title{
				height: 90/28rem;
				line-height: 90/28rem;
			}
			ul{
				li{
					
					background-repeat: no-repeat;
					background-size: 120/28rem 120/28rem;
					background-position: 80% center;
					.img-father{
						width: 170/28rem;
					}
					&:last-child{
						border: none;
					}
					.img-right{
						p{
							width: 380/28rem;
						}
					}
				}
				.sold{
					background-image: url(../../assets/img10.png);
				}
				.sell{
					background-image: url(../../assets/img12.png);
				}
				.past{
					background-image: url(../../assets/img11.png);
				}
			}
		}
		.shopping-close{
			height: 98/28rem;
			line-height: 98/28rem;
			position: fixed;
			width: 100%;
			bottom: 116/28rem;
			left: 0;
			.close-btn{
				height: 100%;
				width: 210/28rem;
			}
		}
		.shopping_bottom{
			bottom: 0;
		}
		
		.get-btn{
			border-radius: 8/28rem;
			width: 140/28rem;
			height: 60/28rem;
			line-height: 60/28rem;
		}

		.default-father{
			width: 9rem;
			height: 9rem;
		}
	}
</style>